import Mock from 'mockjs'

Mock.mock('/api/blog/particulars', 'post', {
  code: 0,
  msg: '',
  data: {
    maintitle: '前端',
    subhead: 'mock',
    id: 11222333666554447,
    total: 65,
    acticle: {
      maintitle: '前端',
      subhead: 'mock',
      title: '@csentence(40)',
      id: '@word(12,16)',
      description: '@csentence(40)',
      author: '@cname',
      like: '@natural(0,1235)',
      dislike: '@integer(0,500)',
      date: '2021-10-24 13:12:59',
      update: '@integer(0,1000)',
      discuss: '@integer(0,1000)',
      pageview: '@integer(0,1000)',
      imgurl:
        'https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/de0c79b4487447b3adccef19fc57d522~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?',
      content: `<p>1.类组件深入认识setState<br/>    setState，它对状态的改变，**可能**是异步的<br/><br/>        如果改变状态的代码处于某个HTML元素的事件中，则其是异步的，否则是同步<br/><br/>    如果遇到某个事件中，需要同步调用多次，需要使用函数的方式得到最新状态<br/><br/><br/><br/>    最佳实践：<br/><br/>        1. 把所有的setState当作是异步的<br/><br/>        2. 永远不要信任setState调用之后的状态<br/><br/>        3. 如果要使用改变之后的状态，需要使用回调函数（setState的第二个参数）<br/><br/>        4. 如果新的状态要根据之前的状态进行运算，使用函数的方式改变状态（setState的第一个函数）<br/><br/><br/><br/>    React会对异步的setState进行优化，将多次setState进行合并（将多次状态改变完成后，再统一对state进行改变，然后触发render）<br/></p><pre><code class="Bash"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, { <span class="hljs-title class_">Component</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>

      <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">Comp</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Component</span> {
      
          state = {
              <span class="hljs-attr">n</span>: <span class="hljs-number">0</span>
          }
      
          <span class="hljs-comment">// constructor(props) {</span>
          <span class="hljs-comment">//     super(props);</span>
          <span class="hljs-comment">//     setInterval(() =&gt; {</span>
          <span class="hljs-comment">//         this.setState({</span>
          <span class="hljs-comment">//             n: this.state.n + 1</span>
          <span class="hljs-comment">//         });</span>
      
          <span class="hljs-comment">//         this.setState({</span>
          <span class="hljs-comment">//             n: this.state.n + 1</span>
          <span class="hljs-comment">//         });</span>
          <span class="hljs-comment">//         this.setState({</span>
          <span class="hljs-comment">//             n: this.state.n + 1</span>
          <span class="hljs-comment">//         });</span>
          <span class="hljs-comment">//     }, 1000)</span>
          <span class="hljs-comment">// }</span>
      
          handleClick = <span class="hljs-function">() =&gt;</span> {
              <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>(<span class="hljs-function"><span class="hljs-params">cur</span> =&gt;</span> {
                  <span class="hljs-comment">//参数prev表示当前的状态</span>
                  <span class="hljs-comment">//该函数的返回结果，会混合（覆盖）掉之前的状态</span>
                  <span class="hljs-comment">//该函数是异步执行</span>
                  <span class="hljs-keyword">return</span> {
                      <span class="hljs-attr">n</span>: cur.<span class="hljs-property">n</span> + <span class="hljs-number">1</span>
                  }
              }, <span class="hljs-function">()=&gt;</span>{
                  <span class="hljs-comment">//所有状态全部更新完成，并且重新渲染后执行</span>
                  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"state更新完成"</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>.<span class="hljs-property">n</span>);
              });
      
              <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>(<span class="hljs-function"><span class="hljs-params">cur</span> =&gt;</span> ({
                  <span class="hljs-attr">n</span>: cur.<span class="hljs-property">n</span> + <span class="hljs-number">1</span>
              }));
      
              <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>(<span class="hljs-function"><span class="hljs-params">cur</span> =&gt;</span> ({
                  <span class="hljs-attr">n</span>: cur.<span class="hljs-property">n</span> + <span class="hljs-number">1</span>
              }));
          }
      
          <span class="hljs-title function_">render</span>(<span class="hljs-params"></span>) {
              <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"render"</span>);
              <span class="hljs-keyword">return</span> (
                  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
                      <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>
                          {this.state.n}
                      <span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
                      <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
                          <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.handleClick}</span>&gt;</span>+<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
                      <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
                  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
              )
          }
      }
      </code></pre><p><br/><br/>2.函数组件深入认识setState<br/>    State Hook是一个在函数组件中使用的函数（useState），用于在函数组件中使用状态<br/><br/>    函数有一个参数，这个参数的值表示状态的默认值<br/><br/>    函数的返回值是一个数组，该数组一定包含两项<br/><br/>        第一项：当前状态的值<br/><br/>        第二项：改变状态的函数<br/><br/><br/><br/>    一个函数组件中可以有多个状态，这种做法非常有利于横向切分关注点。<br/><br/><br/><br/>    注意的细节<br/><br/>        1. useState最好写到函数的起始位置，便于阅读<br/><br/>        2. useState严禁出现在代码块（判断、循环）中<br/><br/>        3. useState返回的函数（数组的第二项），引用不变（节约内存空间）<br/><br/>        4. 使用函数改变数据，若数据和之前的数据完全相等（使用Object.is比较），不会导致重新渲染，以达到优化效率的目的。<br/><br/>        5. 使用函数改变数据，传入的值不会和原来的数据进行合并，而是直接替换。<br/><br/>        6. 如果要实现强制刷新组件<br/><br/>           1. 类组件：使用forceUpdate函数<br/><br/>           2. 函数组件：使用一个空对象的useState<br/><br/>        7. **如果某些状态之间没有必然的联系，应该分化为不同的状态，而不要合并成一个对象**<br/><br/>        8. 和类组件的状态一样，函数组件中改变状态可能是异步的（在DOM事件中），多个状态变化会合并以提高效率，此时，不能信任之前的状态，而应该使用回调函数的方式改变状态。如果状态变化要使用到之前的状态，尽量传递函数。<br/><br/></p>
      `
    }
  }
})
